<script>
  var title = "Darrin 318"
  note_left = ""
  note_right = "seat 1 is on the right, when facing the screen"

  var config = {{ seating_config|raw }};
</script>

<style>
  #diagram {
    border: 1px solid #d3d3d3;
  }
</style>

<div>
  <canvas id="diagram" width="900" height="460">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  {#<img id="image">#}
  {#<pre id="seats"></pre>#}

  <script>
    var seats = {
      // counting every chair (including ones that might be broken)
      "left" : [ 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],    // every row has a lefty desk
      "middle" : [13,13,13,13,13,13,13,13,13,13,13,13,13],  // every row has a lefty desk
      "right" :  [ 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],  // these are all righty desks
    }
    var used = {};

    function expand_config(config) {
      expanded = {}
      try {
        for(var section in config) {
          expanded[section] = {}
          for(var letter in config[section]) {
            // config[section][letter]["rows"].sort();
            for(var index = 0; index < config[section][letter]["rows"].length; index++) {
              row = config[section][letter]["rows"][index];
              color = config[section][letter]["color"];
              expanded[section][row] = {
                "letter": letter,
                "color": color,
              }
            }
          }
        }
      }
      catch(err) {
        throw new Error("Invalid config");
      }
      return expanded
    }

    function render_arrow_head(x, y, angle, width, height) {
      var half_width = width / 2.0;
      var half_height = height / 2.0;
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.translate(-1.0 * half_width, -1.0 * half_height);
      ctx.beginPath();
      ctx.moveTo(0.0, 0.0);
      ctx.lineTo(0.0, height);
      ctx.lineTo(width, half_height);
      ctx.closePath();
      ctx.fill();
      ctx.translate(half_width, half_height);
      ctx.rotate(-angle);
      ctx.translate(-1.0 * x, -1.0 * y);
    }

    function render_arrow(section) {
      row = 14

      if(section == "left") {
        var center_x = BASE_ROW_CENTER + 320;
        var width = 70;
      }
      else if(section == "middle") {
        var center_x = BASE_ROW_CENTER;
        var width = 450;
      }
      else if(section == "right") {
        var center_x = BASE_ROW_CENTER - 320;
        var width = 70;
      }
      else {
        console.log("Invalid section: " + section + " (skipping)");
      }

      // Draw row
      ctx.beginPath();
      var center_y = BASE_ROW_START + 20 * row
      var width_half = width / 2.0;
      ctx.strokeStyle = BASE_ROW_COLOR;
      ctx.lineWidth = 1;
      ctx.setLineDash([]);
      ctx.moveTo(center_x - width_half, center_y);
      ctx.lineTo(center_x + width_half, center_y);
      ctx.stroke();
      point_avg = [center_x, center_y]

      render_arrow_head(center_x - width_half, center_y, Math.PI, 10, 10);
    }

    function render_section_row(section, row) {
      var height = BASE_ROW_HEIGHT

      if (seats[section][row - 1] == 0) return

      try {
        var empty = false;
        var color = expanded[section][row]["color"];
        ctx.setLineDash([]);
      }
      catch(err) {
        var empty = true;
        var color = BASE_ROW_COLOR
        ctx.setLineDash([10, 10]);
      }

      if(section == "left") {
        var center_x = BASE_ROW_CENTER + 320;
        var width = 70;
      }
      else if(section == "middle") {
        var center_x = BASE_ROW_CENTER;
        var width = 450;
      }
      else if(section == "right") {
        var center_x = BASE_ROW_CENTER - 320;
        var width = 70;
      }
      else {
        console.log("Invalid section: " + section + " (skipping)");
      }

      // Draw row
      ctx.beginPath();
      var center_y = BASE_ROW_START + 20 * row
      var width_half = width / 2.0;
      ctx.strokeStyle = color;
      ctx.lineWidth = BASE_ROW_HEIGHT;
      ctx.moveTo(center_x - width_half, center_y);
      ctx.lineTo(center_x + width_half, center_y);
      ctx.stroke();
      point_avg = [center_x, center_y]

      if(DRAW_ROW_CENTER_LABELS) {
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, point_avg[0], point_avg[1] - 10, 100);
      }

      if(section == "left") {
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, center_x + width_half + 20, center_y, 100);
      }
      else if(section == "middle") {
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, center_x - width_half - 30, center_y, 100);

        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, center_x + width_half + 30, center_y, 100);
      }
      else if(section == "right") {
        ctx.font = "bold 7pt sans-serif";
        ctx.fillStyle = "#333333";
        ctx.fillText(row, center_x - width_half - 20, center_y, 100);
      }
      else {
        console.log("Invalid section: " + section + " (skipping)");
      }

      // Draw points
      if( ! empty) {
        letter = expanded[section][row]["letter"]
        if( ! ("points" in config[section][letter])) {
          config[section][letter]["points"] = []
        }
        if( ! (letter in used)) {
          used[letter] = 0
        }
        config[section][letter]["points"].push(point_avg);
        used[letter] += seats[section][row - 1];

        if(DRAW_ROW_BLACK_DOTS) {
          if(row <= 4) {
            limit = 1
          }
          else if(row <= 8) {
            limit = 2
          }
          else if(row <= 12) {
            limit = 3
          }
          else {
            limit = 4
          }

          for(var multiplier = 0; multiplier < limit; multiplier++)
          {
            ctx.beginPath();
            ctx.arc(center_x + width_half - 24 * multiplier, center_y, BASE_POINT_RADIUS, 0.0, 2.0 * Math.PI);
            ctx.fillStyle = "#333333";
            ctx.fill();
          }
        }

        //ctx.beginPath();
        //ctx.arc(center_x - width_half, center_y, BASE_POINT_RADIUS, 0.0, 2.0 * Math.PI);
        //ctx.fillStyle = "#d000d0";
        //ctx.fill();
      }
    }

    function render_row(row) {
      render_section_row("left", row);
      render_section_row("middle", row);
      render_section_row("right", row);
    }

    function render_section(section) {
      for(var row = 1; row <= BASE_NUM_ROWS; row++) {
        render_section_row(section, row);
      }
    }

    function render_zone_labels(config) {
      try {
        for(var section in config) {
          for(var letter in config[section]) {
            var num_points = config[section][letter]["points"].length;
            var total_x = 0.0;
            var total_y = 0.0;
            for(var index = 0; index < num_points; index++) {
              point = config[section][letter]["points"][index];
              total_x += point[0];
              total_y += point[1];
            }

            total_x /= num_points;
            total_y /= num_points;

            message = letter + " (rows " + config[section][letter]["rows"][0] + "-" + + config[section][letter]["rows"][num_points - 1] + ")"
            ctx.font = "bold 12pt sans-serif";

            var width = ctx.measureText(message).width + 20.0;
            var height = 24.0
            var width_half = width / 2.0;
            var height_half = height / 2.0;
            ctx.fillStyle = "#333333";
            ctx.fillRect(total_x - width_half, total_y - height_half, width, height);

            var width = ctx.measureText(message).width + 18.0;
            var height = 22.0
            var width_half = width / 2.0;
            var height_half = height / 2.0;
            ctx.fillStyle = "#ffffff";
            ctx.fillRect(total_x - width_half, total_y - height_half, width, height);

            ctx.fillStyle = config[section][letter]["color"];
            ctx.fillText(message, total_x, total_y);
          }
        }
      }
      catch(err) {
        throw new Error("Invalid config");
      }
      return expanded

    }

    // Find diagram DOM object and configure HTML5 canvas
    var diagram = document.getElementById("diagram");
    var ctx = diagram.getContext("2d");
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";

    var EXPANDED = expand_config(config);
    var BASE_NUM_ROWS = 13
    var BASE_ROW_START = 140
    var BASE_ROW_CENTER = document.getElementById("diagram").offsetWidth / 2.0;
    var BASE_ROW_HEIGHT = 6
    var BASE_ROW_COLOR = "grey"
    var BASE_POINT_RADIUS = 7

    var DRAW_ROW_BLACK_DOTS = false;
    var DRAW_ROW_CENTER_LABELS = false;

    // Render title
    ctx.font = "bold 20pt sans-serif";
    ctx.fillText(title, BASE_ROW_CENTER - 250, 50);

    // Render left note
    ctx.font = "bold 12pt sans-serif";
    ctx.fillStyle = "#d000d0";
    ctx.fillText(note_left, 150, 50);

    // Render right note
    ctx.font = "bold 12pt sans-serif";
    ctx.fillStyle = "#333333";
    ctx.fillText(note_right, 625, 50);

    // Render front of room legend
    ctx.font = "italic 10pt sans-serif";
    ctx.fillText("Front of Room", BASE_ROW_CENTER, 120);

    // Render back of room legend
    ctx.font = "italic 10pt sans-serif";
    ctx.fillText("Back of Room", BASE_ROW_CENTER, 430);

    // Render arrows
    // render_arrow("left");
    // render_arrow("middle");
    // render_arrow("right");

    // Render rows and points
    for(var row = 1; row <= BASE_NUM_ROWS; row++) {
      render_row(row);
    }

    // Render zone labels
    render_zone_labels(config);

    // Render to image
    // document.getElementById("image").src = diagram.toDataURL();

    // Print seats used
    // var temp = [];
    // for(var letter in used) {
    //   temp.push(letter)
    // }
    // temp.sort();
    // container = document.getElementById("seats")
    // for(var index in temp) {
    //   var letter = temp[index];
    //   container.innerHTML += letter + " DARRIN 318 " + used[letter] + "\n";
    // }
  </script>
</div>